- const browsertime = medianRun ? pageInfo.data.browsertime.pageSummary.browserScripts[medianRun.runIndex - 1] : pageInfo.data.browsertime.run 

if  browsertime
  - const timings = browsertime.timings;
  - const visualMetrics = browsertime.visualMetrics;
  - baseHelpURL = rootPath + 'help.html#';

  - const defaultVisualMetrics = ['SpeedIndex','FirstVisualChange','LastVisualChange','VisualProgress', 'PerceptualSpeedIndexProgress', 'ContentfulSpeedIndexProgress', 'PerceptualSpeedIndex', 'ContentfulSpeedIndex', 'LastMeaningfulPaint', 'LargestImage', 'Heading' ,'VisualReadiness','VisualComplete85', 'VisualComplete95','VisualComplete99'];
  if options.browsertime.visualMetrics && visualMetrics
    a#visualmetrics
    h3 Visual Metrics
    .row
      .one-half.column
        table 
          tr
            th(colspan='2') Visual Metrics
          tr
            td
              a(href=baseHelpURL + 'FirstVisualChange') First Visual Change
            td.number #{h.time.ms(visualMetrics.FirstVisualChange.toFixed(0))}
          tr
            td
              a(href=baseHelpURL + 'SpeedIndex') Speed Index
            td.number #{h.time.ms(visualMetrics.SpeedIndex.toFixed(0))}
          tr
            td
              a(href=baseHelpURL + 'PerceptualSpeedIndex') Perceptual Speed Index
            td.number #{h.time.ms(visualMetrics.PerceptualSpeedIndex.toFixed(0))}
          tr
            td
              a(href=baseHelpURL + 'ContentfulSpeedIndex') Contentful Speed Index
            td.number #{h.time.ms(visualMetrics.ContentfulSpeedIndex.toFixed(0))}
          if visualMetrics.LargestImage
            tr
              td
                a(href=baseHelpURL + 'LargestImage') Largest Image
              td.number #{h.time.ms(visualMetrics.LargestImage.toFixed(0))}
          if visualMetrics.Heading
            tr
              td
                a(href=baseHelpURL + 'Heading') Heading
              td.number #{h.time.ms(visualMetrics.Heading.toFixed(0))}
          each name in Object.keys(visualMetrics)
            if (!defaultVisualMetrics.includes(name))
              tr
                td #{name}
                td.number #{h.time.ms(visualMetrics[name].toFixed(0))}
          if visualMetrics.LastMeaningfulPaint
            tr
              td
                a(href=baseHelpURL + 'LastMeaningfulPaint') Last Meaningful Paint
              td.number #{h.time.ms(visualMetrics.LastMeaningfulPaint.toFixed(0))}
          tr
            td
              a(href=baseHelpURL + 'VisualComplete85') Visual Complete 85%
            td.number #{h.time.ms(visualMetrics.VisualComplete85.toFixed(0))}
          tr
            td
              a(href=baseHelpURL + 'VisualComplete95') Visual Complete 95%
            td.number #{h.time.ms(visualMetrics.VisualComplete95.toFixed(0))}
          tr
            td
              a(href=baseHelpURL + 'VisualComplete99') Visual Complete 99%
            td.number #{h.time.ms(visualMetrics.VisualComplete99.toFixed(0))}
          tr
            td
              a(href=baseHelpURL + 'LastVisualChange') Last Visual Change
            td.number #{h.time.ms(visualMetrics.LastVisualChange.toFixed(0))}
          tr
            td
              a(href=baseHelpURL + 'VisualReadiness') Visual Readiness
            td.number #{h.time.ms(visualMetrics.VisualReadiness.toFixed(0))}  
      .one-half.column
        .ct-chart.ct-minor-sixth#ct-visualprogress
        include ./visualProgress.pug

  a#browsermetrics
  h3 Browser Metrics
  .row
    .one-half.column
      table
        tr
          th(colspan='2') Navigation Timing
        each value, name in timings.pageTimings
          tr
            - url = baseHelpURL + name
            td
              a(href=url) #{name}
            td.number #{h.time.ms(value)}
    .one-half.column
      table
        tr
          th(colspan='2') Extra timings
        if (timings.paintTiming && Object.keys(timings.paintTiming).length > 0)
          each value, name in timings.paintTiming
            tr
              td #{name}
              td.number #{h.time.ms(value.toFixed(0))}
        else if timings.firstPaint > -1
          tr
            td
              a(href=baseHelpURL + 'firstPaint') First paint
            td.number #{h.time.ms(timings.firstPaint.toFixed(0))}
        if timings.timeToDomContentFlushed
         tr
            td
              a(href=baseHelpURL + 'timeToDomContentFlushed') DOM Content Flushed
            td.number #{h.time.ms(timings.timeToDomContentFlushed.toFixed(0))}
        if timings.timeToContentfulPaint
         tr
            td
              a(href=baseHelpURL + 'timeToContentfulPaint') Time To Contentful Paint
            td.number #{h.time.ms(timings.timeToContentfulPaint.toFixed(0))}
        if timings.timeToFirstInteractive
         tr
            td
              a(href=baseHelpURL + 'timeToFirstInteractive') Time To First Interactive
            td.number #{h.time.ms(timings.timeToFirstInteractive.toFixed(0))}         
        tr
          td
            a(href=baseHelpURL + 'rumSpeedIndex') RUM Speed Index
          td.number #{h.time.ms(timings.rumSpeedIndex.toFixed(0))}
        tr
          td
            a(href=baseHelpURL + 'loadEventEnd') Load Event End
          td.number #{h.time.ms(timings.loadEventEnd.toFixed(0))}
        if (timings.largestContentfulPaint) 
           tr
            td
              a(href=baseHelpURL + 'largestContentfulPaint') Largest Contentful Paint
            td.number #{h.time.ms(Math.max(timings.largestContentfulPaint.loadTime,timings.largestContentfulPaint.renderTime))}
        if (timings.fullyLoaded) 
          tr
            td
              a(href=baseHelpURL + 'fullyLoaded') Fully loaded
            td.number #{h.time.ms(timings.fullyLoaded.toFixed(0))}
        else if (browsertime.fullyLoaded) 
          tr
            td
              a(href=baseHelpURL + 'fullyLoaded') Fully loaded
            td.number #{h.time.ms(browsertime.fullyLoaded.toFixed(0))}
      if (Object.keys(timings.userTimings.marks).length > 0)
        table
          tr
            th(colspan='2') User Timing marks
          if (Object.keys(timings.userTimings.marks).length > 0)
            each value, name in timings.userTimings.marks
              tr
                td #{value.name}
                td.number #{h.time.ms(value.startTime.toFixed(0))}
      if (Object.keys(timings.userTimings.measures).length > 0)
        table
          tr
            th(colspan='3') User Timing measures
          tr
            th Name
            th Start time
            th Duration  
          each value, name in timings.userTimings.measures
            tr
              td #{value.name}
              td.number #{h.time.ms(value.startTime.toFixed(0))}
              td.number #{h.time.ms(value.duration.toFixed(0))} 
  include ./lcp.pug
  include ./firstInput.pug
  include ./layoutShift.pug
  include ./elementTimings.pug
  include ./serverTimings.pug

  a#custom-scripts
  h3 Custom metrics collected through JavaScript
  if browsertime.custom
    table
      tr
        th name
        th value
      each value, name in browsertime.custom
        tr
          td #{name}
          td #{value}
  else
    p There are no custom configured scripts.

  a#extras-metrics
  h3 Extra metrics collected using scripting
  if browsertime.extras
    table
      tr
        th name
        th value
      each value, name in browsertime.extras
        tr
          td #{name}
          td #{value}
  else
    p There are no custom extra metrics from scripting.

  if browsertime.cdp && browsertime.cdp.performance
    a#cdp-performance
    h3 CDP Performance
    table
      tr
        th name
        th value
      each value, name in browsertime.cdp.performance
        tr
          td #{name}
          td #{value.toFixed(0)}

  if options.browsertime.visualElements
   a#visual-elements
   h3 Visual Elements
   table
      tr
       th name
       th x
       th y
       th width
       th height
      each element in browsertime.pageinfo.visualElements.heroes
       tr
        td  #{element.name}
         if (element.filename)
          | (#{element.filename})
        td  #{element.x}
        td  #{element.y}
        td  #{element.width}
        td  #{element.height}
else
  p Missing data from Browsertime.
